<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogFormVisible"
    :is-loading="loading"
    @closeDialog="resetTemp()"
    @comfirmBtn="handleConfirm()"
  >
    <DtForm :form-opts="config" :width-size="1" :ref-obj.sync="config.ref" />
  </dtDialog>
</template>
<script>
import { uuId } from '@/framework/utils/uuid'

export default {
  data() {
    return {
      colunmIndex: undefined,
      loading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改正则',
        create: '新增正则'
      },
      config: {
        ref: null,
        labelWidth: '84px',
        formData: {
          name: '',
          pattern: '',
          message: ''
        },
        labelPosition: 'right',
        columns: [
          {
            label: '正则名称',
            prop: 'name',
            type: 'text',
            component: 'el-input',
            maxlength: 10
          },
          {
            label: '表达式',
            prop: 'pattern',
            type: 'textarea',
            component: 'el-input',
            maxlength: 300,
            bind: {
              autosize: { minRows: 2, maxRows: 4 }
            }
          },
          {
            label: '错误提示',
            prop: 'message',
            type: 'text',
            component: 'el-input',
            maxlength: 30
          }
        ],
        rules: {
          name: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入正则名称'
            }
          ],
          pattern: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入正则表达式'
            }
          ],
          message: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入错误提示'
            }
          ]
        }
      }
    }
  },
  methods: {
    resetTemp() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.config.formData = {
        name: '',
        pattern: '',
        message: '',
        idCardType: '',
        id: ''
      }
      this.config.ref?.uploadIcon?.clear()
      this.$nextTick(() => {
        this.config.ref.clearValidate()
      })
    },
    openDialog(type, row, index, idCardType) {
      this.config.formData.idCardType = idCardType
      this.dialogStatus = type
      this.dialogFormVisible = true
      if (type == 'update') {
        this.config.formData = Object.assign({}, row)
        this.colunmIndex = index
      } else {
        this.config.formData.id = uuId(8)
      }
    },
    async handleConfirm() {
      this.config.ref.validate(async (valid) => {
        if (valid) {
          const form = Object.assign({}, this.config.formData)
          this.dialogFormVisible = false
          this.$emit('getRegList', form, this.dialogStatus, this.colunmIndex)
        }
      })
    }
  }
}
</script>

